<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>计算属性</h1>
    <p>count: {{ count }}</p>
    <p>doubleCount: {{ count * 2 }}</p>
    <p>doubleCount: {{ fn() }}</p>
    <button v-on:click="count++">count++</button>

    <hr>
    <p>time: {{ time }}</p>
    <!-- <p>当前时间为: {{ dateFormat() }}</p>
    <p>当前时间为: {{ dateFormat() }}</p>
    <p>当前时间为: {{ dateFormat() }}</p>
    <p>当前时间为: {{ dateFormat() }}</p>
    <p>当前时间为: {{ dateFormat() }}</p> -->
    <p>当前时间为: {{ dateFormat2 }}</p>
    <button v-on:click="changeTime">change time</button>

    <hr>

    <!-- 这里显示[1,3,5,7,9] -->
    <p>oddArr: {{ oddArr }}</p> 
    <!-- 这里显示1加到9，显示45 -->
    <p>total: {{ total }}</p>
    <!-- 这里显示 !euV elloh -->
    <p>reverseStr: {{ reverseStr }}</p>
    <button v-on:click="arrPush">push</button>


  </div>

  <script src="../Vue.js"></script>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          count: 1,
          time: 1761093591611,
          arr: [1,2,3,4,5,6,7,8,9],
          str: "hello Vue!",
        }
      },
      methods: {
        fn() {
          return this.count * 2;
        },
        dateFormat() {
          console.log("methods的方式");
          const date = new Date(this.time);
          const year = date.getFullYear(); // 获取日期对象对应的年份
          const month = date.getMonth() + 1; // 获取月份（会比实际月份小一）
          const day = date.getDate(); // 获取日
          const hour = date.getHours(); // 获取小时
          const minutes = date.getMinutes(); // 获取分钟
          const seconds = date.getSeconds(); // 获取秒
          return `${year}-${month}-${day}`
        },
        changeTime() {
          this.time = 1961093591611;
          // this.dateFormat2 = "2035-1-1"
        },
        arrPush() {
          this.arr = this.arr.concat([10, 11])
        }
      },
      // 计算属性
      // 通过已有的data这样的响应式数据，通过变形或者通过计算得到一个新的值
      // 里面也是写函数的，这里的函数都是要加return的

      // 计算属性值会基于其响应式依赖被缓存。
      // 计算属性会自动监听其响应式依赖的改变而再一次执行(计算属性也具有响应式)
      // 计算属性的值是只读的，不能去进行修改(想要改变计算属性，只能改变它的响应式依赖)

      // 计算属性写的时候是写成函数的，用的时候是当属性用的(不需要加括号的)
      // 计算属性可以同时依赖于多个数据(既可以是data的数据，也可以是其他的响应式数据，比如其他的计算属性)
      // 计算属性里面是不能出现异步的, 需要立马return

      computed: {
        dateFormat2() {
          console.log("computed的方式");
          
          const date = new Date(this.time);
          const year = date.getFullYear(); // 获取日期对象对应的年份
          const month = date.getMonth() + 1; // 获取月份（会比实际月份小一）
          const day = date.getDate(); // 获取日
          const hour = date.getHours(); // 获取小时
          const minutes = date.getMinutes(); // 获取分钟
          const seconds = date.getSeconds(); // 获取秒
          return `${year}-${month}-${day}`
        },
        oddArr() {
          return this.arr.filter(item => item % 2)
        },
        total() {
          return this.count * this.oddArr.reduce((sum, item) => {
            return sum += item
          }, 0)
        },
        reverseStr() {
          // setTimeout(() => {
            return this.str.split("").reverse().join("")
          // }, 50)
        }
      }
    }).mount("#app")

  </script>
</body>
</html>